<!DOCTYPE html>
<html>
  <head>
    <title>proton.js-behaviour-Force</title>
    <meta
      name="viewport"
      id="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
      }

      #canvas {
        background: #000;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script src="../../lib/requestAnimationFrame.min.js"></script>
    <script src="../../lib/stats.min.js"></script>
    <script src="../../lib/profiler.js"></script>
    <script src="../../lib/color.min.js"></script>
    <script src="//localhost:3001/build/proton.js"></script>
    <script>
      var canvas;
      var context;
      var proton;
      var renderer;
      var emitter;
      var stats;
      var R = 10;
      var tha = 0;
      var _mousedown = false;
      var index = 0;
      var hcolor = 0;
      var colorBehaviour;
      var forceBehaviour, attractionBehaviour;

      main();

      function main() {
        //pf.showAll = true;
        pf.count(120, "Color");
        pf.delay(3600, "Color");

        canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
        //canvas.getContext('2d').globalCompositeOperation = "lighter";

        addStats();
        createProton();

        tick();
        canvas.addEventListener("mousedown", mousedownHandler, false);
        canvas.addEventListener("mouseup", mouseupHandler, false);
        canvas.addEventListener("mousemove", mousemoveHandler, false);
      }

      function addStats() {
        stats = new Stats();
        stats.setMode(2);
        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top = "0px";
        document.body.appendChild(stats.domElement);
      }

      function createProton() {
        proton = new Proton();
        emitter = new Proton.Emitter();
        emitter.rate = new Proton.Rate(
          new Proton.Span(90, 110),
          new Proton.Span(0.1, 0.3)
        );
        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Radius(3, 7));
        emitter.addInitialize(new Proton.Life(2, 3));
        emitter.addInitialize(
          new Proton.Velocity(
            new Proton.Span(1, 2),
            new Proton.Span(0, 360),
            "polar"
          )
        );

        attractionBehaviour = new Proton.Attraction(
          {
            x: 1003 / 2,
            y: 610 / 2
          },
          0,
          200
        );
        forceBehaviour = new Proton.Force(0, 0);
        emitter.addBehaviour(forceBehaviour, attractionBehaviour);
        emitter.addBehaviour(
          new Proton.CrossZone(
            new Proton.RectZone(0, 0, canvas.width, canvas.height),
            "dead"
          )
        );
        emitter.addBehaviour(
          new Proton.Scale(1, 3),
          new Proton.Alpha(1, 0),
          new Proton.Color("#3366b2", "#1155b2")
        );

        var color1 = Color.parse(
          "hsl(" + (hcolor % 360) + ", 100%, 50%)"
        ).hexTriplet();
        var color2 = Color.parse(
          "hsl(" + ((hcolor + 150) % 360) + ", 100%, 50%)"
        ).hexTriplet();

        colorBehaviour = new Proton.Color(color1, color2);
        emitter.addBehaviour(colorBehaviour);

        emitter.p.x = canvas.width / 2;
        emitter.p.y = canvas.height / 2;
        emitter.emit();
        proton.addEmitter(emitter);

        var renderer = new Proton.CanvasRenderer(canvas);
        renderer.onProtonUpdate = function() {
          context.fillStyle = "rgba(0, 0, 0, 0.1)";
          context.fillRect(0, 0, canvas.width, canvas.height);
        };
        proton.addRenderer(renderer);

        window.onresize = function(e) {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          emitter.p.x = canvas.width / 2;
          emitter.p.y = canvas.height / 2;
        };
      }

      function mousedownHandler(e) {
        _mousedown = true;
      }

      function mousemoveHandler(e) {
        if (_mousedown) {
          var _x, _y;
          if (e.layerX || e.layerX == 0) {
            _x = e.layerX;
            _y = e.layerY;
          } else if (e.offsetX || e.offsetX == 0) {
            _x = e.offsetX;
            _y = e.offsetY;
          }

          attractionBehaviour.reset(
            {
              x: _x,
              y: _y
            },
            10,
            500
          );
        }
      }

      function mouseupHandler(e) {
        _mousedown = false;
        attractionBehaviour.reset(
          {
            x: 1003 / 2,
            y: 610 / 2
          },
          0,
          200
        );
      }

      function resetColor() {
        index++;

        if (index % 10 == 0) {
          hcolor++;
          var color1 = Color.parse(
            "hsl(" + (hcolor % 360) + ", 100%, 50%)"
          ).hexTriplet();
          var color2 = Color.parse(
            "hsl(" + ((hcolor + 50) % 360) + ", 100%, 50%)"
          ).hexTriplet();
          colorBehaviour.reset(color1, color2);
          index = 0;
        }
      }

      function tick() {
        requestAnimationFrame(tick);
        stats.begin();
        proton.update();
        proton.stats.update(3);

        resetColor();
        tha += 0.1;
        var x = Math.cos(tha) * R;
        var y = Math.sin(tha) * R;
        forceBehaviour.reset(x, y);
        stats.end();
      }
    </script>
  </body>
</html>
